vue

您所在的位置:网站首页 vue 自定义指令怎么操作dom的属性 vue

vue

2023-03-11 18:25| 来源: 网络整理| 查看: 265

自定义指令补充 自定义指令通过钩子函数的形式来实现自定义的功能

这里是几个常用的钩子函数以及它的方法: bind:只调用一次,指令第一次绑定到元素时调用,在这里可以进行一次性的初始化设置。 inserted:被绑定元素插入父节点时调用 update:所在的组件的VNode更新时调用,指令的值可能发生了改变,也可能没有。 componentUpated:指令所在组件的VNode及其子VNode 全部更新后调用 unbind:只调用一次,指令与元素解绑时调用。

自定义过滤器

过滤器用来对Vue中的属性或者数据进行过滤,即在显示之前进行数据处理或筛选。 过滤器可以用在两个地方:双花括号差值和v-bind表达式

过滤器的语法如下:

{{data|filter(参数)}}

data时filter的第一个参数(隐性参数),而括号中的参数是指第二个以后的参数。

过滤器的用法如下:

//双花括号形式 {{message|capitalize}} //v-bind形式 为什么叫自定义过滤器?

因为Vue2.0以后删除了所有内置过滤器

自定义全局过滤器

使用全局方法Vue.filter可自定义全局过滤器。所谓全局方法就是在多个实例中都可以使用。比如,再定义一个vue实例,在这个示例挂载的元素中也可以使用。

对于过滤器执行的函数,一般建议用箭头函数来表示。

{{8|addZero}} 1 //自定义过滤器,当数字为1位数字时,在前面加个0 //过滤器执行的函数的第一个参数data就表示要过滤处理的数据,过滤器的名称 Vue.filter('addZero', (data) => { //data参数是 | 前面的数据 return data } })

注意:过滤器要先定义,然后再new Vue()实例,否则会失效且报错(也就是过滤器要写在new Vue()前面)

自定义局部过滤器

局部过滤器就是写在实例内部,通过filter选项设置,只能应用在对应的Vue实例挂载的DOM上。

{{currentDate|filterNum(3)}} 1 const vm = new Vue({ el: '#app', data: { currentDate: Date.now(), }, filters: { //局部过滤器 filterNum: (data, n) => { return data.toFixed(n) }, addZero: function (data) { return data


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3